<template>
    <div class="login-wrap">
        <div class="login">
            <div class="form-item">
                <input type="text" v-model="params.user_name" required />
                <label>用户名：</label>
            </div>
            <div class="form-item">
                <input type="password" v-model="params.password" required />
                <label>密码：</label>
            </div>
            <div class="login-btn" @click="onLogin">
                登录
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import storeConstant from '@/store/storeConstant'
    const { AUTH_LISTFN_MUTATION } = storeConstant
    import { login, getAuthList } from '@/api/login'
    import Cache from '@/utils/cache/index'
    let cache = new Cache()
    import constant from '@/utils/constant'
    let { CACHE_LOGIN_TOKEN, CACHE_USER_INFO, CACHE_AUTH_LIST } = constant


    export default {
        name: "index",
        data () {
            return {
                params: {
                    user_name: 'admin',
                    password: 'lds123456',
                }
            }
        },
        computed: {
            ...mapState([
                'authList'
            ]),
        },
        methods: {
            ...mapMutations([
                AUTH_LISTFN_MUTATION
            ]),
            async onLogin () {
                let { params } = this
                let { result } = await login(params)

                let { token, ...userInfo } = result
                cache.setCache(CACHE_LOGIN_TOKEN, token)
                cache.setCache(CACHE_USER_INFO, userInfo)

                // 获取用户权限
                let { result: authList } = await getAuthList(userInfo.id)

                cache.setCache(CACHE_AUTH_LIST, authList)
                this[AUTH_LISTFN_MUTATION](authList)

                window.history.go(-1)
            },
        }
    }
</script>

<style scoped>
    .login-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
    }
    .login {
        padding: 30px;
        box-sizing: border-box;
        width: 300px;
        background-color: #222;
        color: #999;
    }
    .form-item {
        position: relative;
        margin: 10px 0 20px;
        height: 30px;
        border-bottom: 1px solid #fff;
    }

    .form-item input {
        outline: none;
        border: none;
        background-color: transparent;
        width: 100%;
        height: 100%;
        color: #fff;
    }

    .form-item input:focus + label,
    .form-item input:valid + label {
        top: -15px;
        font-size: 12px;
    }

    .form-item label {
        position: absolute;
        left: 0;
        top: 5px;
        font-size: 14px;
        pointer-events: none;

        transition: all .3s;
    }

    .login-btn {
        position: relative;
        width: 60px;
        line-height: 30px;
        text-align: center;
        border-radius: 5%;
        cursor: pointer;
        overflow: hidden;
        transition: all .3s;
    }
    .login-btn:hover {
        background-color: #fff;
        color: #000;
        box-shadow: 0 0 25px #fff, 0 0 50px #fff, 0 0 75px #fff;
    }
    .login-btn > span {
        position: absolute;

    }
    .login-btn > span:nth-child(1) {
        left: 0;
        top: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, transparent, #fff);
        animation: move-top 1s linear infinite;
    }
    @keyframes move-top {
        0% {
            left: -100%;
        }
        50%,100% {
            left: 100%;
        }
    }
    .login-btn > span:nth-child(2) {
        right: 0;
        top: 0;
        height: 100%;
        width: 2px;
        background: linear-gradient(transparent, #fff);
        animation: move-right 1s linear 0.25s infinite;
    }
    @keyframes move-right {
        0% {
            top: -100%;
        }
        50%,100% {
            top: 100%;
        }
    }
    .login-btn > span:nth-child(3) {
        right: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to left, transparent, #fff);
        animation: move-bottom 1s linear 0.5s infinite;
    }
    @keyframes move-bottom {
        0% {
            right: -100%;
        }
        50%,100% {
            right: 100%;
        }
    }
    .login-btn > span:nth-child(4) {
        left: 0;
        bottom: 0;
        height: 100%;
        width: 2px;
        background: linear-gradient(#fff, transparent);
        animation: move-left 1s linear 0.75s infinite;
    }
    @keyframes move-left {
        0% {
            bottom: -100%;
        }
        50%,100% {
            bottom: 100%;
        }
    }
</style>
